<template>
  <div class="my-tag">
    <!-- 输入框和文本只能同时显示一个 -->
    <!-- 使用自定义指令v-focus 聚焦 -->
    <!-- 利用 blur失焦 -->
    <input 
    v-if="isShow"
    v-focus
    @blur="isShow = false"
    :value="value"
    class="input"
    type="text"
    placeholder="输入标签"
    @keyup.enter="handleEnter"
    />
    <!-- 1. 双击显示输入框 -->
    <div v-else class="text" @dblclick="handleClick">
    {{value}}
    </div>
</div>
</template>

<script>
export default {
    name: 'MyTag',
    props: {
        value: String
    },
    data() {
        return {
            isShow: false
        }
    },
    methods: {
        handleClick() {
            this.isShow = true
        },
        handleEnter(e) {
            // 子传父 在父组件里改变tag
            this.$emit('input', e.target.value)
            this.isShow = false
        }
    }
}
</script>

<style lang="less" scoped>
.my-tag {
    cursor: pointer;
    .input {
      appearance: none;
      outline: none;
      border: 1px solid #ccc;
      width: 100px;
      height: 40px;
      box-sizing: border-box;
      padding: 10px;
      color: #666;
      &::placeholder {
        color: #666;
      }
    }
  }
</style>